<template lang="pug">
  .clearfix
    Modal(
      width="800"
      v-model="isShowInvoiceWriteModal"
      title="发票信息填写"
      class-name="vertical-center-modal"
    )
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="90")
        FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'select'")
            //- Select(v-if="item.prop === 'serverName'" v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            //-   Option(
            //-     v-for="(c_item, index) in arrListDown[item.options]"
            //-     :value="c_item.key"
            //-     :key="index"
            //-   ) {{ c_item.value }}
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
          template(v-if="item.type === 'input'")
            Input(v-if="item.prop === 'month'" :value="formData.year + '年' + formData.month + '月'" :placeholder="item.placeholder" :disabled="item.isDisabled")
            Input(v-else v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
          template(v-if="item.type === 'radio'")
            RadioGroup(v-model="formData[item.model]")
              Radio.display-inline-block(v-for="c_item of item.radioArr" :label="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'datePicker'")
            DatePicker(v-model="formData[item.model]" :placeholder="item.placeholder1" type="date")

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import { InvoiceApi } from '@/api/Invoice.api.js'
import { Common } from '@/utils/common.js'
export default {
  // inject: ['reload'],

  name: '',

  props: {
    arrListDown: {
      type: Object,
      default: () => ({})
    }
  },

  data () {
    return {
      isShowInvoiceWriteModal: false,
      formData: {
        invoiceID: '',
        year: '',
        month: '',
        invoiceItem: '',
        companyID: '',
        companyName: '',
        companyCode: '',
        companyLegalName: '',
        invoiceType: '',
        taxNumber: '',
        invoiceRate: '',
        invoiceAmount: '',
        createTime: new Date(),
        serverName: ''
      },
      formItem: [
        { type: 'input', label: '费用月份', placeholder: '请选择费用月份', prop: 'month', model: 'month', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'select', label: '开票项目', placeholder: '请选择开票项目', prop: 'invoiceItem', model: 'invoiceItem', style: 'ivu-col-span-12', options: 'invoiceitem' },
        { type: 'input', label: '客户名称', placeholder: '请输入客户名称', prop: 'companyName', model: 'companyName', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '客户编码', placeholder: '请输入客户编码', prop: 'companyCode', model: 'companyCode', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'input', label: '客户法定名称', placeholder: '请输入客户法定名称', prop: 'companyLegalName', model: 'companyLegalName', style: 'ivu-col-span-12', isDisabled: true },
        { type: 'select', label: '发票类型', placeholder: '请选择发票类型', prop: 'invoiceType', model: 'invoiceType', style: 'ivu-col-span-12', options: 'invoicetype' },
        { type: 'input', label: '发票号码', placeholder: '请输入发票号码', prop: 'taxNumber', model: 'taxNumber', style: 'ivu-col-span-12' },
        { type: 'select', label: '开票税率', placeholder: '请输入开票税率', prop: 'invoiceRate', model: 'invoiceRate', style: 'ivu-col-span-12', options: 'invoiceRate' },
        { type: 'input', label: '开票金额', placeholder: '请输入开票金额', prop: 'invoiceAmount', model: 'invoiceAmount', style: 'ivu-col-span-12' },
        { type: 'datePicker', label: '开票日期', placeholder: '请选择开票日期', prop: 'createTime', model: 'createTime', style: 'ivu-col-span-12' },
        { type: 'input', label: '所属客服', placeholder: '请选择所属客服', prop: 'serverName', model: 'serverName', style: 'ivu-col-span-12', isDisabled: true }
      ],
      rules: {
        invoiceItem: [
          { required: true, message: '请选择开票项目', trigger: 'change' }
        ],
        invoiceType: [
          { required: true, message: '请选择发票类型', trigger: 'change' }
        ],
        taxNumber: [
          { required: true, message: '请输入发票号码', trigger: 'change' }
        ],
        invoiceRate: [
          { required: true, message: '请输入开票税率', trigger: 'change' }
        ],
        invoiceAmount: [
          { required: true, message: '请输入开票金额', trigger: 'change' }
        ],
        createTime: [
          { required: true, message: '开票日期' }
        ]
      }
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowInvoiceWriteModal = false
    },

    show () {
      this.isShowInvoiceWriteModal = true
      this.$refs.formData.resetFields()
    },

    // 发票信息填写
    handleSubmit () {
      // var tempMonth = this.formData.month.substr(4, 2)
      // console.log('tempMonth: ', tempMonth, +tempMonth.substr(0, 1))
      // this.formData.month = +tempMonth.substr(0, 1) > 0 ? tempMonth : +tempMonth.substr(1, 1)
      console.log('this.formData: ', this.formData)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // console.log(this.formData)
          InvoiceApi.postInvoiceApply(this.formData).then(res => {
            if (res.status === 200 && res.data.success) {
              this.$Message.success(res.data.message)
              this.isShowInvoiceWriteModal = false
              Object.keys(this.formData).forEach(key => {
                this.formData[key] = ''
              })
              this.$emit('query')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请重新输入!')
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
